<mat-tab-group [disableRipple]="options?.disableRipple"
  [preserveContent]="options?.preserveContent"
  [animationDuration]="options?.animationDuration ?? 500"
  [disablePagination]="options?.disablePagination"
  [attr.mat-align-tabs]="options?.alignTabs"
  [attr.mat-stretch-tabs]="options?.stretchTabs ? true : null"
  [headerPosition]="options?.headerPosition"
  [color]="options?.color"
  [displayDensity]="styling?.appearance?.displayDensity"
  resizeObserver  (sizeChange)="onResize($event)"
>
  <mat-tab *ngFor="let slide of slides$(); trackBy:trackByKey" [label]="slide.title"
    [disabled]="slide.disabled"
    [ngSwitch]=""
    >
  @switch (slide.type) {
    @case ('AccountingStatement') {
      <pac-widget-accounting-statement class="tab-widget flex-1 w-full h-full"
        [editable]="editable"
        [dataSettings]="slide.options?.dataSettings"
        [options]="slide.options?.options"
        [styling]="slide.styling"
        [style]="slide.options?.styling?.widget"
        [slicers]="_slicers()"
        (linkSlicersChange)="onSlicersChange($event)"
      />
    }
    @case (IndicatorCardWidgetType.IndicatorCard) {
      <pac-indicator-card class="tab-widget flex-1 w-full h-full"
        [editable]="editable"
        [dataSettings]="slide.options?.dataSettings"
        [options]="slide.options?.options"
        [styling]="slide.styling"
        [style]="slide.options?.styling?.widget"
        [slicers]="_slicers()"
        (linkSlicersChange)="onSlicersChange($event)"
      />
    }
    @case (WidgetComponentType.AnalyticalCard) {
      <pac-widget-analytical-card class="tab-widget flex-1 w-full h-full"
        [editable]="editable"
        [title]="slide.options?.title"
        [dataSettings]="slide.options?.dataSettings"
        [options]="slide.options?.options"
        [chartSettings]="slide.options?.chartSettings"
        [styling]="slide.styling"
        [style]="slide.options?.styling?.widget"
        [slicers]="_slicers()"
        (linkSlicersChange)="onSlicersChange($event)"
      />
    }
    @case (WidgetComponentType.AnalyticalGrid) {
      <pac-widget-analytical-grid class="tab-widget flex-1 w-full h-full"
        [editable]="editable"
        [title]="slide.options?.title"
        [dataSettings]="slide.options?.dataSettings"
        [options]="slide.options?.options"
        [styling]="slide.styling"
        [slicers]="_slicers()"
        (linkSlicersChange)="onSlicersChange($event)"
      />
    }
    @case ('TabGroup') {
      <pac-story-widget-tabgroup class="tab-widget flex-1 w-full h-full"
        [editable]="editable"
        [title]="slide.title"
        [options]="slide.options?.options"
        [styling]="slide.styling"
        [style]="slide.options?.styling?.widget"
        [slicers]="_slicers()"
        (linkSlicersChange)="onSlicersChange($event)"
      />
    }
  }
  </mat-tab>
</mat-tab-group>

<div *ngIf="editable && placeholder$()" class="ngm-story-widget__placeholder absolute top-0 left-0 w-full h-full flex flex-col justify-center items-center">
  <pac-placeholder-add></pac-placeholder-add>
  <span class="ngm-story-widget__placeholder-title">{{ 'Story.Widgets.TabGroup.Title' | translate: {Default: 'Tab Group'} }}</span>
</div>
